<template>
    <div class="container yuan-container">

        <a-card title="包装计划">
            <div class="filter-panel">
                <div class="filter-list">
                    <span>品名：</span>
                    <a-input-search allowClear v-model="pageParams.materialName" placeholder="请输入关键字" @search="resetList" />
                </div>
                <div class="filter-list">
                    <span>标准：</span>
                    <a-select v-model="pageParams.standard" @change="resetList" allowClear placeholder="请选择标准">
                        <a-select-option value="国标">国标</a-select-option>
                        <a-select-option value="省标">省标</a-select-option>
                        <a-select-option value="省标-北京">省标-北京</a-select-option>
                        <a-select-option value="省标-上海">省标-上海</a-select-option>
<!--                        <a-select-option value="国标-北京">国标-北京</a-select-option>-->
                    </a-select>
                </div>
                <div class="filter-list">
                    <span>产品大类：</span>
                    <a-select v-model="pageParams.inventoryType" @change="resetList" allowClear placeholder="请选择大类">
                        <a-select-option v-if="pageParams.standard == '国标'" value="C60">C60</a-select-option>
                        <a-select-option v-if="pageParams.standard == '国标'" value="C70">C70</a-select-option>
                        <a-select-option v-if="pageParams.standard == '省标'" value="C80">C80</a-select-option>
                        <a-select-option v-if="pageParams.standard == '省标'" value="C90">C90</a-select-option>
                        <a-select-option v-if="pageParams.standard == '省标-北京'" value="C81">C81</a-select-option>
                        <a-select-option v-if="pageParams.standard == '省标-上海'" value="C82">C82</a-select-option>
<!--                        <a-select-option v-if="pageParams.standard == '省标-北京'" value="C91">C91</a-select-option>-->
                        <a-select-option v-if="pageParams.standard == '省标-上海'" value="C92">C92</a-select-option>
                    </a-select>
                </div>
                <div class="filter-list">
                    <span>选择日期：</span>
                    <a-range-picker @change="dateChange" :placeholder="['开始日期','结束日期']" :format="['YYYY-MM-DD','YYYY-MM-DD']" />
                </div>
                <div class="filter-list" style="display: inline-flex; align-items: center;">
                    <span>成品要货天数：</span>
                    <a-input-group compact style="width: 220px; display: inline-block;">
                        <a-input-number
                            v-model="pageParams.packStart"
                            placeholder="最小天数"
                            style="width: 90px"
                            @change="onSellDayRangeChange"
                        />
                        <span style="margin: 0 4px;">~</span>
                        <a-input-number
                            v-model="pageParams.packEnd"
                            placeholder="最大天数"
                            style="width: 90px"
                            @change="onSellDayRangeChange"
                        />
                    </a-input-group>
                </div>
                <div class="filter-list" style="vertical-align: sub;">
                    <span>当前查询品种数量：{{tableOption.pagination.total}}</span>
                </div>
            </div>
            <div class="page-top-label" style="display: flex; justify-content: space-between; align-items: center;">
                <div style="display: flex;">
                    <div class="pt-list">
                        <div class="pt-left">
                            <div class="pt-title">包装品种数量</div>
                            <div class="pt-info">{{tableOption.pagination.total}}</div>
                        </div>
                        <img class="pt-right" :src="require('@/assets/img/计划总量.png')" alt="">
                    </div>
                </div>
                <a-button type="primary" icon="download" @click="exportPlan">导出</a-button>
            </div>
            <div class="table">
                <a-table bordered :loading="tableOption.loading" :rowKey="(item,i)=>i" :columns="tableOption.columns"
                    :data-source="tableOption.dataSource" :pagination="tableOption.pagination">
                    <template slot='action' slot-scope="text, record, index">
                        <div>
                            <a-button v-if="record.issuanceState==='1'" style="margin-right: 10px" type="warning" @click="openSend(record)">下发</a-button>
                            <a-button style="margin-right: 10px" type="primary" @click="clickEdit(record)"
                                v-if="record.issuanceState==='1'">
                                编辑
                            </a-button>
                            <a-button style="margin-right: 10px" v-if="record.issuanceState==='2'" type="success" @click="finish(record)">完成</a-button>
                            <a-button style="margin-right: 10px" type="primary" @click="detail(record)">详情</a-button>
                        </div>
                    </template>
                </a-table>
            </div>
        </a-card>
        <detail :visible="modalVisible" :detailData="detailData" @closeModal="onClose"></detail>
        <EditVue :visible="editVisible" :editInfo="editInfo" @closeModal="editVisible=false" @resetList="getTableData" />

    </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import detail from "./components/detail.vue";
import EditVue from "./components/edit.vue";
import warningApi from "@/api/warningApi";
import nextApi from "@/api/nextApi";
import { h } from "vue";
import { Modal } from 'ant-design-vue';
import { format, toDecimalNoZero } from "@/utils";
@Component({
    name: "packagingPlan",
    components: {
        detail,
        EditVue,
    },
})
export default class extends Vue {
    modalVisible = false;
    tableOption: any = {
        loading: false,
        dataSource: [],
        columns: [
            // {
            //     title: "生产任务编号",
            //     dataIndex: "planSerial",
            //     key: "planSerial",
            //     align: "center",
            // },
            {
                title: "成品批号",
                dataIndex: "batch",
                key: "batch",
                align: "center",
                customRender: (text: string, record: any, index: number) => record.batch || "生产中",
            },
            {
                title: "品名",
                dataIndex: "prodName",
                key: "prodName",
                align: "center",
            },
            {
                title: "产品大类",
                dataIndex: "inventoryType",
                key: "inventoryType",
                align: "center",
            },
            {
                title: "标准",
                dataIndex: "standard",
                key: "standard",
                align: "center",
            },
            {
                title: "装量",
                dataIndex: "loadingQuantity",
                key: "loadingQuantity",
                align: "center",
            },
            {
                title: "现有成品要货天数",
                dataIndex: "availableSellDay",
                key: "availableSellDay",
                align: "center",
            },
            {
                title: "计划包装数量(袋)",
                dataIndex: "prodNum",
                key: "prodNum",
                align: "center",
                customRender: (text: string, record: any, index: number) => toDecimalNoZero(record.prodNum),
            },
            {
                title: "颗粒需求量(kg)",
                dataIndex: "inputNum",
                key: "inputNum",
                align: "center",
            },
            {
                title: "来料颗粒批号",
                dataIndex: "inputBatch",
                key: "inputBatch",
                align: "center",
                customRender: (text: string, record: any, index: number) => record.inputBatch || "生产中",
            },
            {
                title: "包装后可供销售天数",
                dataIndex: "packSellDay",
                key: "packSellDay",
                align: "center",
                // sorter: (a, b) => a.packSellDay - b.packSellDay,
                defaultSortOrder: 'ascend',
            },
            {
                title: "计划包装完成时间",
                dataIndex: "finishTime",
                key: "finishTime",
                align: "center",
                width: 120,
                customRender: (text: string, record: any, index: number) => {
                    return format(record.finishTime, "yyyy-MM-dd");
                },
            },
            {
                title: "状态",
                dataIndex: "issuanceState",
                key: "issuanceState",
                align: "center",
                width: 80,
                customRender: (text: string, record: any, index: number) => {
                    const data = {
                        1: { title: "待下发", class: "status-words c-primary" },
                        2: { title: "已下发", class: "status-words c-warning" },
                        3: { title: "已暂停", class: "status-words c-warning" },
                        4: { title: "已终止", class: "status-words c-danger" },
                        5: { title: "已完成", class: "status-words c-success" },
                    };
                    const dataOne = data[record.issuanceState] || {};
                    const dom = h("div", { class: dataOne.class }, dataOne.title);
                    return dom;
                },
            },
            {
                align: "center",
                dataIndex: "action",
                key: "action",
                title: "操作",
                width: 260,
                scopedSlots: { customRender: "action" },
            },
        ],
        pagination: {
            pageSize: 10,
            current: 1,
            total: 0,
            showTotal: (total: number | string) => `共${total}条`,
            onChange: this.pageChange,
        },
    };
    viewDetail = false;
    mounted() {
        this.getTableData();
    }
    async getTableData() {
        this.tableOption.dataSource = [];
        this.tableOption.loading = true;
        let params = {
            page: this.tableOption.pagination.current,
            pageSize: this.tableOption.pagination.pageSize,
            ...this.pageParams,
        };
        try {
            const res = await warningApi.postFindDetailByList(params);
            this.tableOption.pagination.total = res.data?.total || 0;
            this.tableOption.dataSource = res.data?.records || [];
        } finally {
            this.tableOption.loading = false;
        }
    }

    //详情
    detailData = {};
    detail(record: any) {
        this.detailData = record;
        this.modalVisible = true;
    }

    pageChange(page: number, pageSize: number) {
        this.tableOption.pagination.pageSize = pageSize;
        this.tableOption.pagination.current = page;
        this.getTableData();
    }
    onClose() {
        this.modalVisible = false;
        this.viewDetail = false;
    }
    resetList() {
        this.tableOption.pagination.current = 1;
        this.getTableData();
    }
    onSellDayRangeChange() {
        if(this.pageParams.inventoryType){
            this.resetList();
        }else{
            this.$message.info('请选择产品大类')
        }
    }
    pageParams = {
        startTime: "",
        endTime: "",
        materialName: "",
        standard: undefined,
        inventoryType: undefined,
        planName: "包装计划",
        packStart:'',
        packEnd:'',
    };
    dateChange(e: any[]) {
        const arr = e.map((item) => item.format("YYYY-MM-DD"));
        this.pageParams.startTime = arr[0];
        this.pageParams.endTime = arr[1];
        this.resetList();
    }
    openSend(record){
        Modal.confirm({
            title: '确定下发生产计划吗？',
            width:500,
            content: '',
            okText: '确定',
            cancelText: '取消',
            onOk: async () => {
               await this.send(record)
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }
    //下发
    async send(record: any) {
        console.log(record)
        this.tableOption.loading = true;
        try {
            const res = await warningApi.getIssuancePlan({ id: record.id });
            this.$message.success(res.msg);
            await this.getTableData();
        } finally {
            this.tableOption.loading = false;
        }
    }

    editVisible = false;
    editInfo = {};
    clickEdit(item) {
        this.editInfo = item;
        this.editVisible = true;
    }
    //已完成按钮
    async finish(record){
        let id = record.id
        const res = await warningApi.finishPlan({id:id})
        this.$message.success(res.msg)
        await this.getTableData()
    }
    // 导出计划数据
    exportPlan() {
        (nextApi as any).exportPlanData({ planName: '包装计划' }, (res: any) => {
            const blob = new Blob([res.data], {
                type: 'application/vnd.ms-excel',
            });
            const url = window.URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', '包装计划.xls');
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            window.URL.revokeObjectURL(url);
        });
    }
}
</script>
<style scoped lang="scss">
.container {
    padding: 20px;
    .tool-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        span {
            padding-left: 10px;
            font-size: 18px;
        }
        button {
            margin-left: 10px;
        }
    }
    .table {
        margin-top: 20px;
    }
}
</style>
